<!--
 * @Author: your name
 * @Date: 2021-06-24 16:33:30
 * @LastEditTime: 2021-10-26 14:43:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup-ui\src\pages\admin\category\List.vue
-->
<template>
  <!-- 产品栏目管理 -->
  <div>
    <!-- 添加 -->
    <div>
      <el-button type="primary" @click="toAdd">添加</el-button>
    </div>
    <!-- 表格 -->
    <div>
      <el-table
        v-loading="loading"
        class="tabels"
        :data="tableData"
        style="width: 100%"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-table-column label="序号" type="index" />
        <el-table-column label="栏目编号">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="名称">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="图标" prop="icon">
          <template slot-scope="scope">
            <el-image
              style="width: 35px; height: 35px"
              :src="scope.row.icon"
              :preview-src-list="[scope.row.icon]"
            />
          </template>
        </el-table-column>
        <el-table-column label="排序号">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.num }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >

            <el-button
              :plain="true"
              size="mini"
              type="danger"
              @click="
                handleDelete(scope.row.id);
                open2();
              "
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div>
      <el-pagination
        class="fenye"
        :current-page="paging.page"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="paging.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paging.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 弹出的对话框 -->
    <div>
      <el-dialog title="添加栏目信息" :visible.sync="dialogFormVisible">
        <el-form ref="ruleForm" :model="form" :rules="rules">
          <el-form-item
            label="栏目名称"
            :label-width="formLabelWidth"
            prop="name"
          >
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="序号" :label-width="formLabelWidth">
            <el-input v-model="form.num" autocomplete="off" />
          </el-form-item>
          <el-form-item label="图标" :label-width="formLabelWidth" prop="icon">
            <el-upload
              class="avatar-uploader"
              :action="uploadFileURL"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            :plain="true"
            @click="
              saveForm();
              open1();
            "
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { pageQuery, saveOrUpdate, deleteById } from "@/api/column";
import { showFileURL, uploadFileURL } from "@/utils/config";
export default {
  data() {
    return {
      // 基本数据
      tableData: [],
      // 分页
      paging: {
        // 当前页
        page: 1,
        // 每页条数
        pageSize: 5,
        // 共几条
        total: 0,
      },
      // 对话框的显示与隐藏
      dialogFormVisible: false,
      // 对话框里的数据
      form: {
        id: "",
        name: "",
        num: "",
        icon: "",
      },
      formLabelWidth: "120px",
      // 对话框上传的图片地址
      imageUrl: "",
      // 图片的展示地址与上传地址
      showFileURL,
      uploadFileURL,
      // 表单验证规则
      rules: {
        name: [{ required: true, message: "请输入栏目名称", trigger: "name" }],
        icon: [{ required: true, message: "请上传图片", trigger: "icon" }],
      },
      // 表单加载中
      loading: false,
    };
  },
  computed: {},
  watch: {
    paging: {
      handler() {
        this.init();
      },
      deep: true,
    },
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    open1() {
      if (dialogFormVisible == false) {
        this.$message({
          message: "添加成功",
          type: "success",
        });
      }
    },
    open2() {
      this.$message({
        message: "删除成功",
        type: "success",
      });
    },
    // 编辑
    handleEdit(data) {
      this.dialogFormVisible = true;
      this.form = { ...data };
      this.imageUrl = data.icon;
    },
    // 删除
    async handleDelete(id) {
      const res = await deleteById({ id });
      this.init();
    },
    // 获取对应当前页与页面条数的栏目全部信息
    async init() {
      this.loading = true;
      const res = await pageQuery(this.paging);
      console.log(res);
      this.tableData = [...res.data.list];
      this.paging.total = res.data.total;
      this.loading = false;
    },
    // 点击换页，改变paging里的数据
    handleSizeChange(val) {
      this.paging.pageSize = val;
    },
    handleCurrentChange(val) {
      this.paging.page = val;
    },
    // 添加对话框里的数据
    toAdd() {
      this.form = [];
      this.imageUrl = "";
      this.dialogFormVisible = true;
    },
    // 对话框里用户图片上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(res);
      this.form.icon = showFileURL + res.data.id;
    },
    // 保存对话框里的数据
    saveForm() {
      // 通过表单验证后保存数据
      this.$refs["ruleForm"].validate(async (valid) => {
        if (valid) {
          this.loading = true;
          const res = await saveOrUpdate(this.form);
          console.log(res);
          this.dialogFormVisible = false;
          this.init();
          this.form = [];
          this.imageUrl = "";
          this.loading = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
.fenye {
  margin: 10px;
  text-align: right;
}
.avatar {
  width: 300px;
  height: 200px;
  object-fit: cover;
}
</style>
